<template>
  <div id="order">
      <el-card>
      </el-card>
    <el-card>
      <div>
        <el-row :gutter="50" style="margin-top:10px">
          <el-col :span="15" style="margin-left:65px;">
            <el-input @keyup.enter.native="searchHandler"  @focus="focus" @blur="blur" placeholder="桌台搜素"></el-input>
         </el-col>
          <el-col :span="2" style="margin-left:185px;">
             <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true"  round>查询</el-button>
          </el-col>
            <el-col :span="1">
             <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true"  round >批量打印</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="90" style="margin-top:30px">
          <el-col :span="25" style="margin-left:65px;">
            <div >
             <el-card shadow="hover" class="box-card">
             <div style="text-align:center">
             <span class="font-style-english">A01</span>
            </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card>
    </div></el-col>
  <el-col :span="25"><div>
     <el-card shadow="hover" class="box-card">
        <div style="text-align:center">
         <span class="font-style-english">A02</span>
        </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card></div></el-col>
  <el-col :span="25"><div>
     <el-card shadow="hover" class="box-card">
        <div style="text-align:center">
         <span class="font-style-english">A03</span>
        </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card></div></el-col>
  <el-col :span="25"><div>
     <el-card shadow="hover" class="box-card">
        <div style="text-align:center">
         <span class="font-style-english">A04</span>
        </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card></div></el-col>
     </el-row>

      <el-row :gutter="90" style="margin-top:50px">
          <el-col :span="25" style="margin-left:65px;">
            <div >
             <el-card shadow="hover" class="box-card">
             <div style="text-align:center">
             <span class="font-style-english">B01</span>
            </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
             <el-radio v-model="radio" label="3">3</el-radio>
             <el-radio v-model="radio" label="4">4</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card>
    </div></el-col>
  <el-col :span="25"><div>
     <el-card shadow="hover" class="box-card">
        <div style="text-align:center">
         <span class="font-style-english">B02</span>
        </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
             <el-radio v-model="radio" label="3">3</el-radio>
             <el-radio v-model="radio" label="4">4</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card></div></el-col>
  <el-col :span="25"><div>
     <el-card shadow="hover" class="box-card">
        <div style="text-align:center">
         <span class="font-style-english">B03</span>
        </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
             <el-radio v-model="radio" label="3">3</el-radio>
             <el-radio v-model="radio" label="4">4</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card></div></el-col>
  <el-col :span="25"><div>
     <el-card shadow="hover" class="box-card">
        <div style="text-align:center">
         <span class="font-style-english">B04</span>
        </div>
         <el-form class="font-style-chinese">
           <el-form-item  label="人数">
             <el-radio v-model="radio" label="1">1</el-radio>
             <el-radio v-model="radio" label="2">2</el-radio>
             <el-radio v-model="radio" label="3">3</el-radio>
             <el-radio v-model="radio" label="4">4</el-radio>
           </el-form-item>
           <el-form-item label="订单状态">
              <el-select v-model="select">
          <el-option label="1" value="1">已支付</el-option>
          <el-option label="2" value="2">未支付</el-option>
          <el-option label="3" value="3">空</el-option>
        </el-select>
           </el-form-item>
           <el-form-item label="备注">
             <el-input placeholder="备注" :disabled="true">
             </el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="View-details" style="margin-left:10px;">查看详情</el-button>
                <el-button style="margin-left:70px;">打印</el-button>
              </el-form-item>
         </el-form>
         </el-card></div></el-col>
     </el-row>
      </div>
    </el-card>
    
  </div>
</template>
<script>
export default {
  name: "table",
  //组件创建
  created() {},
  mounted() {},
  data() {
    return {
      open:false,
      tableData: [
        // {
        //   no: "001",
        //   tableStatus: "离线",
        //   tableNo: "432",
        //   tableIp: "432",
        //   torderNo: "123",
        //   orderNo: "324",
        //   tableAmount: "432",
        //   time: "2022-1-12",
        // },
                {
          no: "002",
          tableStatus: "在线",
          tableNo: "123",
          tableIp: "1234",
          torderNo: "123",
          orderNo: "34",
          tableAmount: "sd",
          time: "2022-1-12",
        },
                {
          no: "003",
          tableStatus: "在线",
          tableNo: "123",
          tableIp: "124",
          torderNo: "123",
          orderNo: "324",
          tableAmount: "sad",
          time: "2022-1-12",
        },

      ],
        newTableForm: {
        tableStatus: undefined,
        tableNo: undefined,
        tableAmount: undefined,
        tableIp: undefined,
      },
    };
  },
  methods: {
        handleDelete(row) {
      var _this = this;
      this.$confirm(
        '是否确认删除餐桌"' + row.tableNo + '"的信息?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then( function() {
          // var data={"dishId": row.dishId};
          // data:"da="+JSON.stringify([{"name":"zhan"},{"age":"25"}])
          _this.dishId.push(row.dishId);
          console.log(_this.dishId);
          _this.delete.dishId=_this.dishId;
          console.log(_this.delete);
          return deleteDish(_this.delete);
        })
        .then(() => {
          this.dishId =[],
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
        
    },
  },
};
</script>
<style lang="less" scoped>
.el-button--primary{background: #68baf0;border-color:#68baf0;}
.el-button--primary:hover{background: #6e9af8;border-color:#6e9af8;}
 .box-card {
    width: 300px;
    background-color: #68baf0;
  }
  .font-style-english{
    font-family:'Courier New', Courier, monospace;
    font-size: 40px;
    font-weight: bold;
  }
  .font-style-chinese{
    font-size: 30px;
     font-weight: bold;
  }
  .View-details{
  color: #fff;
  background-color: black;
  border-color: black;
  }

 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>
